<template>
  <div class="login_container">
    <!-- 一行中设置两个列, 左边列作为占位,右边列设置登录表单 -->
    <el-row>
      <!-- 使用xs属性, 作为设备响应式,自适应 -->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form
          class="login_form"
          :model="loginForm"
          :rules="rules"
          ref="loginFormId"
        >
          <h1>Hello</h1>
          <h2>欢迎使用传令甄选商店</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              show-password
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="login_btn"
              size="default"
              @click="login"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import userStore from '@/store/modules/user'
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { GetTime } from '@/utils/times'

//消息弹窗引入
import { ElNotification } from 'element-plus'

//用户仓库
let useUserStore = userStore()

//按钮是否加载
let loading = ref(false)

//表单
let loginFormId = ref()

//使用路由
let $router = useRouter()
let $route = useRoute()

let loginForm = reactive({
  username: 'admin',
  password: '111111',
}) //设置默认值

const selfCheckUserName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入用户名'))
  } else {
    if (value.length < 3 || value.length > 20) {
      return callback(new Error('用户名长度大于3并且小于20个字符'))
    } else {
      return callback()
    }
  }
}

const selfCheckPassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入密码'))
  } else {
    if (value.length < 6 || value.length > 50) {
      return callback(new Error('用户名长度大于6并且小于50个字符'))
    } else {
      return callback()
    }
  }
}

// 自定义的表单校验
const rules = {
  username: [{ validator: selfCheckUserName, trigger: 'change' }],
  password: [{ validator: selfCheckPassword, trigger: 'change' }],
}

// form表单自带的校验
// const rules = {
//   username: [
//     {
//       required: true,
//       message: '账号长度至少三位, 并且小于二十位',
//       trigger: 'change',
//       min: 3,
//       max: 20,
//     },
//   ],
//   password: [
//     {
//       required: true,
//       message: '密码长度至少六位, 并且小于二十位',
//       trigger: 'change',
//       min: 6,
//       max: 20,
//     },
//   ],
// }

let login = async () => {
  //表单校验
  let res = await loginFormId.value.validate() //只要这里返回的false, 就不会往下继续执行
  // console.log(res)

  // console.log(1111)
  // 通知pinia仓库发登录请求;
  // 成功 => 跳转首页;
  // 失败 => 弹窗展示登录失败原因;

  loading.value = true

  try {
    let res = await useUserStore.login(loginForm)
    // console.log(res)

    let redirect: any = $route.query.redirect
    //导航到登录首页
    $router.push({ path: redirect || '/' })

    ElNotification({
      type: 'success',
      message: '登录成功',
      title: `Hi,${GetTime()}好`,
    })

    //登录成功取消加载动画
    loading.value = false
  } catch (error) {
    //登录失败取消加载动画
    loading.value = false
    ElNotification({
      type: 'error',
      message: (error as Error).message, //promis 返回的 Error
    })
  }
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  //   background: url('@/assets/images/background.jpg') no-repeat;
  background: url('@/assets/images/IMG_20231003_154700.jpg') no-repeat;
  background-size: cover;
}

.login_form {
  position: relative;
  width: 80%;
  top: 30vh;
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
  padding: 40px; // 与父亲的边界的距离

  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    font-size: 20px;
    color: white;
    margin: 20px 0px; // 与兄弟元素的距离设置
  }

  .login_btn {
    width: 100%; // 跟父元素一样的宽度
  }
}
</style>
